<template>
  <div class="everyDay">
    <div class="mould-box">
      <p class="title">
        <img :src="day_left.left.img_url" alt="" />
        <i>
          <span>{{ day_left.title }}</span
          >{{ day_left.stateTitle }}
        </i>
      </p>
      <ul class="goodsList">
        <li v-for="item in day_goods" :key="item.gid">
          <a href="">
            <div class="goodsBox">
              <div class="top">
                <div class="top-left">
                  <span>{{ item.reduce_price }}</span>
                  <img
                    src=""
                  />
                </div>
                <div class="top-right">{{ item.discount }}</div>
              </div>
              <div class="img-box">
                <img
                  :src="item.image.img_url"
                  alt=""
                  :width="format_size(item.image.img_size, 'w')"
                  :height="format_size(item.image.img_size, 'h')"
                />
              </div>
              <div class="goods-name">{{ item.brandName }}</div>
              <div class="goods-size">{{ item.subject }}</div>
              <div class="price-box">
                <span class="new">￥{{ item.sale_price }}</span>
                <del class="old">￥{{ item.little_price }}</del>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    day_left: {
      type: Object,
      default: () => {},
    },
    day_goods: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    format_size(val, type) {
      // console.log(val);
      let arr = val.split("x");
      // console.log(arr);
      if (type == "w") {
        return arr[0];
      } else {
        return arr[1];
      }
    },
  },
};
</script>

<style lang="scss">
.everyDay {
  padding: 10px 10px 34.1333px 5px;
  background: rgb(247, 247, 247);
  .mould-box {
    border-radius: 10px 30px 10px 10px;
    background: #fff;
    .title {
      height: 28px;
      color: #333;
      font-size: 18px;
      margin-bottom: 5px;
      padding-left: 10px;
      display: flex;
      align-items: center;

      img {
        height: 16px;
        min-width: 60px;
      }
      i {
        display: inline-block;
        background: rgb(239, 129, 102);
        border-radius: 12px 0 12px 0;
        color: #fff;
        font-size: 12px;
        transform: scale(0.84);
        padding-right: 5px;
        margin-left: 5px;
        span {
          display: inline-block;
          border-radius: 12px 0 12px 0;
          background: black;
          padding: 0 5px;
          margin-right: 5px;
        }
      }
    }
    .goodsList {
      width: 100%;
      overflow: scroll;
      display: flex;
      margin-top: 10px;
      padding: 0 10px 10px 5px;
      li {
        a {
          .goodsBox {
            background: #fdece8;
            border-radius: 5px;
            padding: 5px;
            margin-left: 5px;
            .top {
              display: flex;
              border: 1px solid #ef8166;
              border-radius: 4px;
              background: #fff;
              align-items: center;
              justify-content: space-between;
              .top-left {
                display: flex;
                background: linear-gradient(
                  0deg,
                  rgb(239, 129, 102),
                  rgb(245, 79, 66)
                );
                position: relative;
                span {
                  width: 60px;
                  padding: 0 3px 0 0px;
                  color: #f6f302;
                  transform: scale(0.84);
                  text-align: center;
                }
                img {
                  height: 100%;
                  position: absolute;
                  top: 0;
                  right: 0;
                  line-height: 0;
                }
              }
              .top-right {
                width: 62px;
                color: #ef8166;
                font-size: 12px;
                transform: scale(0.84);
                text-align: center;
              }
            }
            .img-box {
              background: #fff;
              padding: 5px;
              margin-top: 5px;
              img {
                width: 100%;
              }
            }
            .goods-name,
            .goods-size {
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #333;
              font-size: 12px;
              transform: scale(0.84);
              margin-top: 10px;
              text-align: center;
            }
            .price-box {
              background: linear-gradient(90deg, #f54f42, #ef8166);
              border-radius: 4px;
              color: #fff;
              margin-top: 5px;
              text-align: center;
              display: flex;
              justify-content: space-between;
              .new,
              .old {
                font-size: 12px;
                transform: scale(0.84);
                padding-left: 5px;
              }
              .new {
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
}
</style>